import React from 'react';
import {useDispatch, useSelector} from "react-redux";
import {setLightMode} from "../../../../../../redux/reducers/commonSettings";
import {Card, CardHeader, Typography} from "@material-ui/core";
import Switch from "@material-ui/core/Switch";
import {makeStyles} from "@material-ui/styles";

const useStyles = makeStyles(theme => ({
  menuButton: {
    margin: theme.spacing(1.5, 1, 0, 0)
  },
}));

export default function ApplicationSettings() {
  const classes = useStyles();
  const dispatch = useDispatch();
  const darkModeSelected = useSelector((state) => state.commonSettings.darkMode);

  const handleToggle = () => {
    dispatch(setLightMode(!darkModeSelected));
  }
  return (
    <>
      <Card elevation={10}>
        <CardHeader
          action={<Switch checked={darkModeSelected} color="primary" className={classes.menuButton}
                          onChange={handleToggle}/>}
          title={<Typography variant='h5'> Dark design </Typography>}
          subheader={darkModeSelected ? <Typography variant={'body2'}> Disable dark mode </Typography>
            : <Typography variant={'body2'}> Enable dark mode </Typography>}
        >
        </CardHeader>
      </Card>
    </>
  )
}

